<template>
  <div class="studentBody">
    <!-- 页头 -->
    <div class="header">
      <el-page-header :content="title" @back="goBack" />
    </div>
    <!-- 查询 -->
    <div class="operate">
      <span>考生姓名:</span>
      <!-- 题库名称input -->
      <div class="key">
        <el-input
          v-model="params.key"
          class="w-50 m-2 keyInput"
          placeholder="请输入考生姓名"
          clearable
        />
      </div>
      <span>状态:</span>
      <!-- 状态 -->
      <div class="state">
        <el-select v-model="params.state" clearable placeholder="全部">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <span>部门:</span>
      <!-- 部门 -->
      <div class="department">
        <el-cascader
          :options="optionsDepartment"
          @change="changeDepartment"
          :props="props"
          clearable
        />
      </div>
      <span>班级:</span>
      <!-- 班级 -->
      <div class="department">
        <el-select :disabled="params.depid ? false : true" v-model="params.classid" clearable placeholder="请选择">
          <el-option
            v-for="item in optionsClass"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <!-- 查询按钮 -->
      <el-button
        type="primary"
        style="font-size: 12px; margin-left: 10px; width: 60px; height: 30px"
        @click="inquire"
        >查询</el-button
      >
    </div>
    <div class="table">
      <!-- 表格 -->
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        :header-cell-style="{ backgroundColor: '#fafafa' }"
      >
        <el-table-column label="姓名">
          <template #default="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column property="classname" label="班级名称" />
        <el-table-column
          property="scores"
          label="分数"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="考试时间"
          property="addtime"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span>{{ scope.row.readtime?scope.row.readtime.substr(0, 16):'' }}</span>
          </template>
        </el-table-column>
        <el-table-column property="state" label="状态">
          <template #default="scope">
            <span :style="scope.row.state==='未阅卷' ? 'color: red;' : ''">{{ scope.row.state }}</span>
          </template></el-table-column
        >
        <el-table-column
          fixed="right"
          label="操作"
          width="80"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="lookExam(scope.row)"
            >
              阅卷
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="demo-pagination-block">
        <el-pagination
          v-model:currentPage="params.page"
          v-model:page-size="params.psize"
          :page-sizes="[10, 20, 30, 100]"
          :small="small"
          :disabled="disabled"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-- 阅卷弹出框 -->
      <TestPaper v-if="isOpen"></TestPaper>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, onMounted, inject,provide, watchEffect,watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getStudentList, getDepartmentList ,getClassList} from "../../apis/exam/exam";
import { ElTable, ElMessage } from "element-plus";
import TestPaper from "../../components/exam/TestPaper.vue"
const route = useRoute();
const router = useRouter();
const data = reactive({
  // 是否打开弹框
  isOpen:false,
  small: false,
  background: false,
  disabled: false,
  props: {
    checkStrictly: true,
    value: "id",
    label: "name",
    children: "children",
  },
  // 部门列表数据
  optionsDepartment: [],
  // 班级列表
  optionsClass:[{id:'',name:''}],
  // 加载
  loading: true,
  // 数据总条数
  counts: 0,
  title: "",
  // 请求列表数据
  params: {
    testid: 0,
    page: 1,
    psize: 10,
    state: "",
    key: "",
    depid: null,
    classid:null
  },
  // 列表数据
  tableData: [],
  checkedData:{}
});
const {
  params,
  small,
  disabled,
  counts,
  tableData,
  loading,
  title,
  props,
  optionsDepartment,
  optionsClass,
  isOpen
} = toRefs(data);
// 传给子组件的数据
provide('data',data)
watch(isOpen,(newValue:boolean,oldValue:boolean)=>{
  if(!newValue){
    studentList(data.params);
  }
},{immediate:false,deep:false})
// 接受上个页面的参数
const query = route.query;
data.title = String(query.title);
data.params.testid = Number(query.id);
// 请求部门列表
const departmentList = async () => {
  const res: any = await getDepartmentList();
  if (res.errCode === 10000) {
    data.optionsDepartment = res.data.list;
  } else {
    ElMessage.error(res.errMsg);
  }
};
const classList=async (depid:number)=>{
  const res:any=await getClassList(depid)
  if (res.errCode === 10000) {
    data.optionsClass = res.data.list;
  } else {
    ElMessage.error(res.errMsg);
  }
}
// 部门选择内容改变
const changeDepartment = (e: any) => {
  if (e) {
    const id = e[e.length - 1];
    data.params.depid = id;
    classList(id)
  }else{
    data.params.depid = e;
    data.params.classid=null
    data.optionsClass=[]
  }
};
// 请求列表接口
const studentList = async (params: any) => {
  data.loading = true;
  const res: any = await getStudentList(params);
  if (res.errCode === 10000) {
    data.tableData = res.data.list;
    data.counts = res.data.counts;
    data.loading = false;
  } else {
    ElMessage.error(res.errMsg);
    data.loading = false;
  }
};
onMounted(() => {
  studentList(data.params);
  departmentList();
});
// 点击阅卷
const lookExam = (e: any) => {
  data.isOpen=true
  data.checkedData=e
  console.log(e);
  
};
// 选择状态
const options = [
  {
    value: "已阅卷",
    label: "已阅卷",
  },
  {
    value: "未阅卷",
    label: "未阅卷",
  },
];
// 点击返回
const goBack = () => {
  router.push("exam");
};
// 点击查询
const inquire = () => {
  studentList(data.params);
};
// 每页多少条内容改变
const handleSizeChange = (val: number) => {
  params.value.page=1
  params.value.psize = val;
  studentList(params.value);
};
// 页码内容改变
const handleCurrentChange = (val: number) => {
  params.value.page = val;
  studentList(params.value);
};
</script>

<style lang="less" scoped>
@import url("../../static/css/exam/student.css");
</style>
